import React, { Component } from 'react';
import { Button } from 'antd';
import EditableTableCustomTypes from '../EditableTableCustomTypes'; // 测试组件

// 模拟数据
const dataSource = [];
// eslint-disable-next-line no-plusplus
for (let i = 0; i < 3; i++) {
  dataSource.push({
    key: i.toString(),
    name: `Edrward ${i}`,
    age: 32,
    address: String(i % 2),
    selectCustom: '真组件',
  });
}

class AgencyManagement extends Component {
  constructor(props) {
    super(props);
    this.state = {
      addRowData: {}, // 新增行的数据源
    };

    // 案例表头
    this.columnsEditable = [
      {
        title: '输入框',
        dataIndex: 'name',
        width: '25%',
        // editable: true, // 是否可编辑
        textType: 'input', // 进入编辑状态的是哪种输入框，类型有如下
        // selectYesNo下拉（是否）， selectEnable下拉（启用/禁用） inputNumber数值框
        // selectCustom自定义下拉框数据
      },
      {
        title: '数值选择框',
        dataIndex: 'age',
        width: '15%',
        editable: true,
        textType: 'inputNumber',
      },
      {
        title: '选项框',
        dataIndex: 'address',
        width: '40%',
        editable: true,
        textType: 'selectYesNo',
        render: text => {
          return text === '0' ? '是' : '否';
        },
      },
      {
        title: '动态传值选项框',
        dataIndex: 'selectCustom',
        width: '40%',
        editable: true,
        textType: 'selectCustom',
        selectCustomData: ['李组长', '真组件', '父组件'], // 动态下拉选项，在此更新值
      },
    ];
  }

  // 保存编辑事件（接收回调处理后的数据）
  handleSaveTable = saveData => {
    console.log('保存数据', saveData);
  };

  // 删除数据事件（接收回调，删除的数据）
  handleDelTable = (delData, allData) => {
    console.log('删除数据', delData);
    console.log('所有', allData);
  };

  // 新增行按钮事件
  handleAddTable = () => {
    // 调用组件进行通信
    this.childTableDom.onAddEditRow(); // 触发子组件新增
  };

  // 渲染
  render() {
    return (
      <div>
        <Button style={{ marginBottom: '10px' }} onClick={this.handleAddTable}>
          + 添加
        </Button>
        <EditableTableCustomTypes
          columns={this.columnsEditable}
          dataSource={dataSource} // 渲染的数据源
          handleSaveTable={this.handleSaveTable} // 保存编辑回调
          handleDelTable={this.handleDelTable} // 删除行回调
          addRowData={this.state.addRowData} // 新增行的数据源
          ref={child => {
            this.childTableDom = child;
          }} // 新增所需要的ref事件，触发子组件函数
          // 指定区域内，可以传入所有table参数API
          optsTable={
            {
              // scroll: { x: '100%' }, // 横向滚动
            }
          }
        />
      </div>
    );
  }
}

export default AgencyManagement;
